import React, { Component } from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import image from '../image/favicon-32x32.png'
import Registration from './register/Registration'
import { HashRouter as Router, Route } from 'react-router-dom'
import PasswordRetrieve from './password-reset/PasswordRetrieve'
import PasswordReset from './password-reset/PasswordReset'
import {getLangFromLocalStorage} from '../constant/lang-util'
import locales from '../locales'
import {LocaleProvider} from "antd";
import { IntlProvider } from 'react-intl'

class App extends Component {
  render () {
      const lang = this.props.lang || getLangFromLocalStorage()
      const langData = locales[lang]

    return (
        <IntlProvider locale={langData.intlLocale} messages={langData.intlMessage}>
            <LocaleProvider locale={langData.locale}>
      <div id="root">
        <Helmet>
          <meta charSet="utf-8"/>
          <title>思特沃克学习平台 | ThoughtWorks Learning Platform</title>
          <link rel="icon" type="image/png" sizes="32x32" href={image}/>
        </Helmet>

        <Router>
          <div>
            <Route exact path="/" component={Registration}/>
            <Route path='/password-retrieve' component={PasswordRetrieve}/>
            <Route path='/password-reset' component={PasswordReset}/>
          </div>
        </Router>

      </div>
  </LocaleProvider>
  </IntlProvider>
    )
  }
}

const mapStateToProps = ({lang}) => ({lang})

export default connect(mapStateToProps)(App)
